<template>
	<div class="home-container">
		<el-row>
			<el-col :span="24">
				<UserTaskCard></UserTaskCard>
			</el-col>
		</el-row>
		<el-row class="mt10" :gutter="10">
			<el-col :span="16">
				<vp-card>
					<template #header>
						<div class="card-header">
							<div>
								<el-space>
									<vp-label zh="监控项目" en="Monitor Item" />
									<el-tag type="error" round>{{ monitorItems.length }}</el-tag>
								</el-space>
							</div>
							<el-space size="large">
								<el-link @click="loadMonitorItemList" type="info">
									<el-icon class="mr3"><ele-Refresh /></el-icon>
									<vp-label zh="刷新" en="Refresh" />
								</el-link>
							</el-space>
						</div>
					</template>
					<div class="monitor-item-box" v-loading="monitorItemLoading">
						<el-row :gutter="16">
							<el-col :span="8" class="mb8" v-for="(item, index) in monitorItems" :key="index">
								<el-button type="info" plain class="w100 monitor-btn" @click="handleMonitorItem(item.key)">
									<el-row class="w100">
										<el-col :span="18" class="monitor-desc">
											<el-space>
												<el-icon color="var(--el-color-danger)">
													<ele-WarningFilled />
												</el-icon>
												<vp-label :zh="item.descZh" :en="item.descEn" />
											</el-space>
										</el-col>
										<el-col :span="6" class="monitor-count">{{ item.sl }}</el-col>
									</el-row>
								</el-button>
							</el-col>
						</el-row>
					</div>
				</vp-card>
			</el-col>
			<el-col :span="8">
				<vp-card>
					<template #header>
						<div class="card-header">
							<div>
								<el-space>
									<vp-label zh="质量安全通告" en="Quality and Safety Noitce" />
								</el-space>
							</div>
							<el-space size="large">
								<el-link @click="loadQualitySafetyNotice" type="info">
									<el-icon class="mr3"><ele-Refresh /></el-icon>
									<vp-label zh="刷新" en="Refresh" />
								</el-link>
								<el-link @click="toQualitySafetyNoticePage" type="info">
									<el-icon class="mr3"><ele-MoreFilled/></el-icon>
									<vp-label zh="更多" en="More" />
								</el-link>
							</el-space>
						</div>
					</template>
					<div class="personal-info-box" v-loading="qualitySafetyNoticeLoading">
						<ul class="personal-info-ul">
							<li v-for="(v, k) in qualitySafetyNoticeList" :key="k" class="personal-info-li">
								<el-tag v-if="v.jsbs === 1" effect="plain" type="info" size="small">已阅</el-tag>
								<el-tag v-else effect="plain" type="warning" size="small">未阅</el-tag>
								<a @click="handleViewQualitySafetyNotice(v.id)" target="_block" class="personal-info-li-title">
									{{ `${v.ggbt}` }}
								</a>
							</li>
						</ul>
					</div>
				</vp-card>
			</el-col>
		</el-row>
		<UserDialog ref="userDialogRef"></UserDialog>
		<AddForm/>
	</div>
</template>

<script setup lang="ts" name="home">
import { defineAsyncComponent, onMounted, ref, onDeactivated, computed } from 'vue';
import request from '/@/utils/request';
import { useRouter } from 'vue-router';
import UserTaskCard from './component/userTaskCard.vue';
import AddForm from './component/AddForm.vue';
import { authMenu } from '/@/utils/authFunction';

const UserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));

const monitorItemData = ref([
	{ key: 'QUALITY_POST_AUTH', sl: 0, descZh: '岗位授权到期监控预警', descEn: 'Position Auth Monitor', auth: 'qualityPostAuthlist' },
	{ key: 'TRAINING_RETRAINING_MONITORING', sl: 0, descZh: '培训监控预警', descEn: 'Retraining Monitor', auth: 'trainingMonitor' },
]);
const monitorItemLoading = ref(false);

const timer = ref();

onMounted(() => {
	loadMonitorItemList();
	loadQualitySafetyNotice();
	// 每10分钟刷新数据
	timer.value = window.setInterval(timerFunc, 1000 * 60 * 10)
})

const timerFunc = () => {
	loadMonitorItemList();
	loadQualitySafetyNotice();
}
onDeactivated(() => {
	window.clearInterval(timer.value)
})

const router = useRouter();

const loadMonitorItemList = () => {
	monitorItemLoading.value = true
	request.get('/home/monitorItem/list').then(res => {
		const list = res?.data || [];
		monitorItemData.value.forEach((item: any) => {
			const obj = list.find((obj: any) => { return item.key === obj.key });
			item.sl = obj?.sl || 0;
		});
	}).finally(() => {
		monitorItemLoading.value = false
	})
}

const monitorItems = computed(() => {
	return monitorItemData.value.filter((item: any) => { return item.sl > 0 && authMenu(item.auth) });
});

const handleMonitorItem = (key: string) => {
	if (key == 'TRAINING_RETRAINING_MONITORING') {
		router.push({ name: "trainingMonitor", query: { yjbs: 1 } })
	} else if (key == 'QUALITY_POST_AUTH') {
		router.push({ name: "qualityPostAuthlist", query: { jdbs: 1 } })
	}
}

// 加载质量安全通告
const qualitySafetyNoticeLoading = ref(false);
const qualitySafetyNoticeList = ref([] as any[]);
const loadQualitySafetyNotice = () => {
	qualitySafetyNoticeLoading.value = true
	request.get('/home/qualitySafetyNotice/list').then(res => {
		qualitySafetyNoticeList.value = res?.data || [];
	}).finally(() => {
		qualitySafetyNoticeLoading.value = false;
	})
}

const toQualitySafetyNoticePage = () =>{
	router.push("/quality/safetyNotice/view");
}

const handleViewQualitySafetyNotice = (id: string)=>{
	router.push({
		name: "viewQualitySafetyNotice",
		params: {
			id: id,
		},
	})
	setTimeout(() => {
		loadQualitySafetyNotice();
	}, 1500)
}

</script>

<style scoped lang="scss">
.home-container {
	overflow-x: hidden;
	padding: 10px;

	.home-card-item {
		width: 100%;
		height: 103px;
		background: var(--el-text-color-secondary);
		border-radius: 4px;
		transition: all ease 0.3s;

		&:hover {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			transition: all ease 0.3s;
		}
	}

	:deep(.monitor-btn>span) {
		width: 100%;

		.monitor-desc {
			text-align: left;
		}

		.monitor-count {
			text-align: right;
			color: var(--el-color-danger);
			text-decoration: underline;
			line-height: 26px;
		}
	}

	.home-card-item-box {
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;

		&:hover {
			i {
				right: 0px !important;
				bottom: 0px !important;
				transition: all ease 0.3s;
			}
		}

		i {
			position: absolute;
			right: -10px;
			bottom: -10px;
			font-size: 70px;
			transform: rotate(-30deg);
			transition: all ease 0.3s;
		}

		.home-card-item-flex {
			padding: 0 20px;
			color: var(--color-whites);

			.home-card-item-title,
			.home-card-item-tip {
				font-size: 13px;
			}

			.home-card-item-title-num {
				font-size: 18px;
			}

			.home-card-item-tip-num {
				font-size: 13px;
			}
		}
	}

	.home-card-first {
		background: var(--el-color-white);
		border: 1px solid var(--el-border-color-light, #ebeef5);
		display: flex;
		align-items: center;

		img {
			width: 60px;
			height: 60px;
			border-radius: 100%;
			border: 2px solid var(--color-primary-light-5);
		}

		.home-card-first-right {
			flex: 1;
			display: flex;
			flex-direction: column;

			.home-card-first-right-title {
				color: var(--el-color-black);
			}

			.home-card-first-right-msg {
				font-size: 13px;
				color: var(--el-text-color-secondary);
			}
		}
	}

	.home-monitor {
		height: 200px;

		.flex-warp-item {
			width: 50%;
			height: 100px;
			display: flex;

			.flex-warp-item-box {
				margin: auto;
				height: auto;
				text-align: center;
				color: var(--el-text-color-primary);
			}
		}
	}

	.home-warning-card {
		height: 292px;

		:deep(.el-card){
			height: 100%;
		}
	}

	.home-dynamic {
		height: 200px;

		.home-dynamic-item {
			display: flex;
			width: 100%;
			height: 60px;
			overflow: hidden;

			&:first-of-type {
				.home-dynamic-item-line {
					i {
						color: orange !important;
					}
				}
			}

			.home-dynamic-item-left {
				text-align: right;

				.home-dynamic-item-left-time1 {}

				.home-dynamic-item-left-time2 {
					font-size: 13px;
					color: var(--el-text-color-secondary);
				}
			}

			.home-dynamic-item-line {
				height: 60px;
				border-right: 2px dashed var(--el-border-color-light, #ebeef5);
				margin: 0 20px;
				position: relative;

				i {
					color: var(--color-primary);
					font-size: 12px;
					position: absolute;
					top: 1px;
					left: -6px;
					transform: rotate(46deg);
					background: var(--el-color-white);
				}
			}

			.home-dynamic-item-right {
				flex: 1;

				.home-dynamic-item-right-title {
					i {
						margin-right: 5px;
						border: 1px solid var(--el-border-color-light, #ebeef5);
						width: 20px;
						height: 20px;
						border-radius: 100%;
						padding: 3px 2px 2px;
						text-align: center;
						color: var(--color-primary);
					}
				}

				.home-dynamic-item-right-label {
					font-size: 13px;
					color: var(--el-text-color-secondary);
				}
			}
		}
	}

	.monitor-item-box {
		height: 140px;
	}

	.personal-info-box {
		height: 140px;
		overflow: hidden;
		.personal-info-ul {
			list-style: none;
			.personal-info-li {
				font-size: 13px;
				padding-bottom: 10px;
				display: flex;
    			gap: 6px;
				.personal-info-li-title {
					    display: inline-block;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						color: var(--el-text-color-secondary);
						text-decoration: none;
				}
				& a:hover {
					color: var(--el-color-primary);
					cursor: pointer;
				}
			}
		}
	}
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	:deep(.button) {
		padding: 0;
		min-height: auto;
	}
}
</style>
